<template>
  <div class="mindmap-demo-container">
    <div class="header">
      <h1>思维导图组件演示</h1>
      <p class="header-description">这是MindmapViewer组件的演示页面</p>
    </div>
    
    <div class="demo-section">
      <el-card shadow="hover">
        <div class="card-header">
          <span>思维导图预览</span>
        </div>
        <div class="mindmap-demo-content">
          <MindmapViewer :data="demoData" />
        </div>
      </el-card>
    </div>
    
    <div class="description-section">
      <el-card shadow="hover">
        <div class="card-header">
          <span>使用说明</span>
        </div>
        <div class="description-content">
          <p>MindmapViewer组件用于展示测试需求的思维导图结构，支持以下功能：</p>
          <ul>
            <li>树形层级展示测试需求</li>
            <li>展开/折叠节点</li>
            <li>导出为Xmind格式</li>
            <li>导出为PDF格式</li>
          </ul>
          <p>在实际应用中，您可以在"智能生成测试用例"页面中，完成需求分析后点击"生成测试点思维导图"按钮查看实际的测试需求思维导图。</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
// 仅导入需要的组件
import MindmapViewer from '../components/MindmapViewer.vue'

// 演示数据 - 适合MindmapViewer组件的完整结构数据
const demoData = {
  requirement_overview: '电商系统测试需求分析',
  modules_count: 4,
  requirements_count: 15,
  full_analysis_content: JSON.stringify({
    modules: [
      {
        name: '用户管理模块',
        requirements: [
          {
            name: '用户注册功能',
            testPoints: [
              { name: '验证新用户注册流程' },
              { name: '验证邮箱/手机验证功能' },
              { name: '验证密码强度校验' }
            ]
          },
          {
            name: '用户登录功能',
            testPoints: [
              { name: '验证正常用户名密码登录' },
              { name: '验证错误密码登录提示' },
              { name: '验证账户锁定机制' }
            ]
          }
        ]
      },
      {
        name: '商品管理模块',
        requirements: [
          {
            name: '商品浏览功能',
            testPoints: [
              { name: '验证商品列表展示' },
              { name: '验证商品详情页面' },
              { name: '验证商品搜索功能' }
            ]
          },
          {
            name: '商品分类功能',
            testPoints: [
              { name: '验证分类浏览' },
              { name: '验证多级分类导航' }
            ]
          }
        ]
      },
      {
        name: '购物车模块',
        requirements: [
          {
            name: '添加商品功能',
            testPoints: [
              { name: '验证添加商品到购物车' },
              { name: '验证购物车商品数量更新' }
            ]
          },
          {
            name: '购物车管理功能',
            testPoints: [
              { name: '验证修改商品数量' },
              { name: '验证删除购物车商品' }
            ]
          }
        ]
      },
      {
        name: '订单模块',
        requirements: [
          {
            name: '创建订单功能',
            testPoints: [
              { name: '验证订单信息填写' },
              { name: '验证收货地址选择' }
            ]
          },
          {
            name: '支付功能',
            testPoints: [
              { name: '验证多种支付方式' },
              { name: '验证支付结果处理' }
            ]
          }
        ]
      }
    ]
  })
}
</script>

<style scoped>
.mindmap-demo-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
  text-align: center;
}

.header h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 8px;
}

.header-description {
  color: #909399;
  font-size: 14px;
}

.demo-section {
  margin-bottom: 20px;
}

.description-section {
  margin-top: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.card-header span {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.mindmap-demo-content {
  padding: 20px;
}

.description-content {
  padding: 20px;
}

.description-content p {
  margin-bottom: 15px;
  color: #606266;
  line-height: 1.6;
}

.description-content ul {
  margin-bottom: 15px;
  padding-left: 20px;
}

.description-content li {
  margin-bottom: 8px;
  color: #606266;
  line-height: 1.6;
}
</style>